<template>
  <div class="page">
    <Top></Top>
    <div class="greybg">
      <div class="wrap course">
        <h4>{{details.lm_name}}-{{details.grade_name}}</h4>
        <div class="flexbox">
          <div class="three_list">
            <ul>
              <li><img src="@/assets/images/icon003.png" alt=""><router-link :to="{path:'/course',query:{id:id,pid:pid,name:details.lm_name}}"  >进入学习<br /><span>(尚未激活)</span></router-link></li>
              <li><img src="@/assets/images/icon001.png" alt=""><router-link :to="{path:'/questionBank',query:{pid:this.id,name:details.lm_name}}"  >题库练习</router-link></li>
              <li><img src="@/assets/images/icon002.png" alt=""><router-link :to="{path:'/exam',query:{id:id,name:details.lm_name}}" @click="goPage()">模拟考试</router-link></li>
            </ul>
          </div>
          <div class="jihuo">
            <el-button type="primary" @click="dialogVisible = true"
              >激活账户</el-button
            >
            <p class="col9" style="padding-top: 10px">
              个人用户请先在登录小程序完成报名
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 评论 -->
    <div class="comment wrap">
      <h5>学员评论 ({{cmtList?cmtList.length:'0'}})</h5>
      <ul class="cmt-list" v-if="cmtList!=null">
        <li v-for="(item,index) in cmtList" :key="index">
          <img
            class="avtar" :src="item.avatar"  alt=""
          />
          <span>{{item.name}}</span>
          <p class="cmt-txt">
            {{item.content}}
          </p>
          <div class="data">{{item.comment_time}}</div>
        </li>
      </ul>
    </div>
    <el-dialog
      title="身份验证"
      :visible.sync="dialogVisible"
      width="30%"
      center>
      <span style="padding-bottom: 20px; display: block; text-align: center"
        >单位集体报名请输入身份证号码激活</span
      >
      <el-input v-model="idcard" placeholder="请输入身份证号码"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getActivate()" >立即激活</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Top from '@/components/layout/top'
export default {
  components:{
    Top
  },
  data() {
    return {
      dialogVisible: false,
      idcard: "",
      id:0,
      pid:0,
      details:{},
      cmtList:[]
    };
  },
  mounted(){
   this.pid = this.$route.query.pid
   this.id = this.$route.query.id
   this.getDetails()
  },
  methods:{
    // 激活账号
    getActivate(){
      this.$axios.post('/api/User/activate',{idcard:this.idcard,lm_id:this.id}).then(res=>{
        console.log(res)
        this.details.is_apply = 1
      })
      this.dialogVisible = false
    },
    getDetails(){
      this.$axios.post('/api/User/kcdetail',{lm_id:this.id,xy_id: this.pid}).then(res=>{
        this.details = res.data.data
        this.cmtList = res.data.data.commont_list
        // console.log(this.details)
      })
    },

  }
};
</script>

<style scoped>
.greybg {
  background-color: #f4f5f7;
  height: 240px;
  padding: 20px 0;
  box-sizing: border-box;
}
.course h4 {
  font-size: 24px;
  font-weight: normal;
  padding: 20px 0;
}
.three_list {
  width: 70%;
}
.three_list ul {
  display: flex;
}
.three_list li {
  background-color: #fff;
  box-shadow: 1px 2px 5px 0px rgba(57, 57, 57, 0.18);
  border-radius: 5px;
  padding: 30px 40px;
  margin-right: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 20px;
}
.three_list li img{
  margin-right: 20px;
}
.jihuo {
  text-align: right;
}
.comment h5 {
  font-size: 18px;
  font-weight: normal;
  margin: 20px auto;
}
.comment h5::before {
  content: "";
  width: 3px;
  height: 18px;
  display: inline-block;
  background: #4398f8;
  margin-right: 15px;
  vertical-align: middle;
}
.cmt-list li {
  position: relative;
  margin-bottom: 20px;
}
.cmt-list .data {
  position: absolute;
  right: 0;
  bottom: 0;
}
.avtar {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: inline-block;
  vertical-align: top;
  margin: 0 10px 10px 0;
}
</style>